<!-- 专家劳务 -->
<script lang="ts" setup>
import { getZjlw , getZjlwDetail } from "@/api/system/zjlw";
import { onMounted, getCurrentInstance, ref, reactive, toRefs } from "vue";
import { deptTreeSelect } from "@/api/role";
const loading = ref(true);
const { proxy } = getCurrentInstance();
const total = ref(0);
let companyNameList = ref([]);

let dateRangeEndTime = ref("");
let ExpenseTypeItems = [
  {
    label: "专家费",
    value: "10",
    elTagType: "primary",
    elTagClass: "",
  },
  {
    label: "劳务费",
    value: "11",
    elTagType: "primary",
    elTagClass: "",
  },
  {
    label: "非员工交通住宿费",
    value: "12",
    elTagType: "primary",
    elTagClass: "",
  },
];

let headers = [
  { title: "费用类型", sortable: false, key: "paymentOrderName" },
  { title: "流水号", sortable: false, key: "serialNumber" },
  { title: "经办人", sortable: false, key: "agent" },
  { title: "经办部门", sortable: false, key: "agentDept" },
  { title: "付款金额", sortable: false, key: "paymentAmount" },
  { title: "支付方式", sortable: false, key: "paymentMethod" },
  { title: "流程状态", sortable: false, key: "stateC" },
  { title: "时间", sortable: false, key: "endTime" },
  { title: "凭证号", sortable: false, key: "voucherNumber" },
  { title: "操作", key: "actions", sortable: false },
];

let Data = ref([]);
let paymentAmountArr = ref(["", ""]);
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    paymentOrderFlag: undefined,
    serialNumber: undefined,
    company: undefined,
    paymentAmount: undefined,
    state: undefined,
    voucherNumber: undefined,
    params: {
      endTime: undefined,
    },
  },
});

const { queryParams } = toRefs(data);
/** 查询公司下拉树结构 */
const getTreeSelect = async () => {
  const res = await deptTreeSelect();
  companyNameList.value = res.data;
};
//获取列表
const getList = async () => {
  loading.value = true;
  queryParams.value.params = {};
  proxy?.addDateRange(queryParams.value, dateRangeEndTime.value, "EndTime");
  proxy?.addDateRange(
    queryParams.value,
    paymentAmountArr.value,
    "PaymentAmount"
  );
  const res = await getZjlw(queryParams.value);
  Data.value = res.rows;
  Data.value.forEach((item) => {
    switch (item.state) {
      case 0:
        item.stateC = "未结束";
        break;
      case 1:
        item.stateC = "已结束";
        break;
    }
  });
  total.value = res.total;
  loading.value = false;
};
/** 搜索按钮操作 */
const handleQuery = () => {
  getList();
};

/* 导出 */
const ExportCik = async () => {
  proxy?.addDateRange(queryParams.value, dateRangeEndTime.value, "EndTime");
  console.log("queryParams：", queryParams.value);
  proxy?.download(
    /* 'http://192.168.2.158:8080/system/zjlw/export', */
    '/system/zjlw/export',
    {
      ...queryParams.value
    },
    `专家劳务_${new Date().getTime()}.xlsx`
  );
};

const Resetting = () => {
  queryParams.value = {
    company: "",
    pageNum: 1,
    pageSize: 10,
    paymentOrderFlag: undefined,
    serialNumber: undefined,
    agent: undefined,
    agentDept: undefined,
    paymentAmount: undefined,
    paymentMethod: undefined,
    voucherNumber: undefined,
  };
  dateRangeEndTime.value = "";
  paymentAmountArr.value = ["", ""];
  getList();
};
const handleSizeChange = (e) => {
  queryParams.value.pageSize = e;
  getList();
};
const handleCurrentChange = (w) => {
  getList();
};
//查看详情
const handleView = async (row) => {
  console.log(row.id,'row')
  const res = await getZjlwDetail(row.id);
  window.open(res.data, "_blank");
};
onMounted(() => {
  getList();
  getTreeSelect();
});
</script>

<template>
  <VCard>
    <VCardText class="py-10">
      <VRow class="match-height">
        <VCol cols="12" md="3">
          <div class="block">
            <div>
              <span class="demonstration">交易时间区间</span>
            </div>
            <el-date-picker
              style="width: 100%; background: rgb(var(--v-theme-surface))"
              v-model="dateRangeEndTime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="YYYY-MM-DD"
            >
            </el-date-picker>
          </div>
        </VCol>

        <VCol cols="12" md="3">
          <VRow class="match-height">
            <VCol cols="12" md="5">
              <AppTextField
                v-model="paymentAmountArr[0]"
                label="交易金额区间"
                placeholder="请输入金额"
                type="number"
                density="compact"
              />
            </VCol>

            <div class="display_flex-end" style="padding-bottom: 15px">～</div>

            <VCol cols="12" md="5">
              <AppTextField
                v-model="paymentAmountArr[1]"
                label=" "
                placeholder="请输入金额"
                type="number"
                density="compact"
              />
            </VCol>
          </VRow>
        </VCol>
        <VCol cols="12" md="3">
          <div>
            <div>
              <span class="demonstration">公司</span>
            </div>
            <el-tree-select
              class="custom-tree-select"
              v-model="queryParams.company"
              :data="companyNameList"
              :props="{
                value: 'label',
                label: 'label',
                children: 'children',
              }"
              value-key="id"
              placeholder="请选择部门"
              check-strictly
            />
          </div>
        </VCol>
        <VCol cols="12" md="3">
          <AppSelect
            :items="ExpenseTypeItems"
            item-title="label"
            item-value="value"
            v-model="queryParams.paymentOrderFlag"
            label="费用类型"
            placeholder="请选择费用类型"
            density="compact"
          />
        </VCol>
        <VCol cols="12" md="3">
          <AppTextField
            v-model="queryParams.serialNumber"
            label="流水号"
            placeholder="请输入流水号"
            density="compact"
          />
        </VCol>
        <VCol cols="12" md="3">
          <AppTextField
            v-model="queryParams.voucherNumber"
            label="凭证号"
            placeholder="请输入凭证号"
            density="compact"
          />
        </VCol>

        <VCol cols="12" md="2" class="display_flex-end">
          <VBtn color="primary" density="compact" @click="handleQuery">
            查询
          </VBtn>

          <VBtn variant="outlined" density="compact" @click="Resetting">
            重置
          </VBtn>
		  
		  <VBtn color="primary" density="compact" @click="ExportCik">
		    导出
		  </VBtn>
        </VCol>

        <VCol cols="12" md="12" class="myTableFiex">
          <VDataTable
            :headers="headers"
            :items="Data"
            :items-per-page="queryParams.pageSize"
            :page="queryParams.pageNum"
            class="text-no-wrap"
          >
            <template #item.actions="{ item }">
              <div class="d-flex gap-1 position_a cction">
                <IconBtn @click="handleView(item)">
                  <VIcon>
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      class="icon icon-tabler icon-tabler-eye"
                      width="20"
                      height="20"
                      viewBox="0 0 24 24"
                      stroke-width="1.5"
                      stroke="rgb(var(--v-theme-primary))"
                      fill="none"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    >
                      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                      <path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
                      <path
                        d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6"
                      />
                    </svg>
                  </VIcon>
                </IconBtn>
              </div>
            </template>
          </VDataTable>
          <div class="mypagination">
            <el-pagination
              v-model:current-page="queryParams.pageNum"
              v-model:page-size="queryParams.pageSize"
              :page-sizes="[10, 25, 50, 100]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </VCol>
      </VRow>
    </VCardText>
  </VCard>
</template>

<style lang="scss" >
@use "@core/scss/template/libs/apex-chart.scss";

.demonstration {
  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
  font-size: 13px;
}

.display_flex-end {
  display: flex;
  align-items: flex-end;
  gap: 15px;
}

.el-picker-panel {
  background-color: rgb(var(--v-theme-surface)) !important ;
}

.myTableFiex {
  .v-data-table__tr td:nth-last-child(1) {
    position: sticky !important;
    position: -webkit-sticky !important;
    inset-inline-end: 0;
    z-index: 0;
    background: rgb(var(--v-theme-surface));
  }

  thead > tr > .v-data-table__td:nth-last-child(1) {
    position: sticky !important;
    position: -webkit-sticky !important;
    inset-inline-end: 0;
    z-index: 0;
    background: rgb(var(--v-theme-surface));
  }
}
</style>
